<!DOCTYPE html>
<html lang="zh-CN">

{[template "__head.html"]}

<body>
<div id="app">

    {[template "__navbar.html"]}

    <div class="container-fluid">
        <div class="row">

            {[template "__sidebar.html" .]}

            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

                <h4><b>任务列表</b></h4>
                <button type="button" class="btn btn-default" @click="RefreshTask()" >刷新数据</button>
                <div class="table-responsive">
                    <table class="table table-hover" style="word-break:break-all; word-wrap:break-all;">
                        <thead>
                        <tr>
                            <th style="width: 15%">任务ID</th>
                            <th style="width: 10%">所在主机</th>
                            <th style="width: 20%">任务描述</th>
                            <th style="width: 20%">任务结果</th>
                            <th style="width: 10%">任务状态码</th>
                            <th style="width: 10%">任务状态</th>
                            <th style="width: 15%">任务创建时间</th>
                            <th >操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in task_list">
                            <td>{{item.ID}}</td>
                            <td>{{item.IP}}</td>
                            <td>{{item.Note}}</td>
                            <td>{{item.Result}}</td>
                            <td>{{item.State}}</td>
                            <td>{{item.StateStr}}</td>
                            <td>{{item.Create}}</td>
                            <td>
                                <button type="button" class="btn btn-default btn-sm" @click="TaskDelete(item)">删除</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <nav>
                        <ul class="pager">
                            <li><a type="button" class="btn btn-default" @click="TaskLastPG()">上一页</a></li>
                            <li><a type="button" class="btn btn-default" @click="TaskNextPG()">下一页</a></li>
                        </ul>
                    </nav>
                </div>


                <h4><b>操作记录</b></h4>
                <button type="button" class="btn btn-default" @click="RefreshOperate()" >刷新数据</button>

                <div class="table-responsive">
                    <table class="table table-hover" style="word-break:break-all; word-wrap:break-all;">
                        <thead>
                        <tr>
                            <th >Date</th>
                            <th >所在主机</th>
                            <th >描述</th>
                            <th >操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in operate_list">
                            <td>{{item.Date}}</td>
                            <td>{{item.ClientIp}}</td>
                            <td>{{item.Note}}</td>
                            <td>
                                <button type="button" class="btn btn-default btn-sm" @click="OperateDelete(item)">删除</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


</div>

{[template "__js.html"]}
{[template "__init_js.html"]}

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            url: new Url(),
            project: "{[.project]}",
            task_list: [],
            operate_list: [],
            task_pg: 0,
        },
        methods: {
            GetList: function () {
                const t = this;
                AjaxRequestText(t.url.TaskList(t.task_pg), {}, "GET", function(d){
                    //console.log(d);
                    var jsonObj = JSON.parse(d);
                    t.task_list = jsonObj.body.data;
                    console.log(t.task_list);
                });
            },
            RefreshTask: function () {
                const t = this;
                t.GetList();
            },
            TaskDelete: function (item) {
                ///task/delete
                const t = this;
                AjaxRequestText(t.url.TaskDelete(item.ID), {}, "GET", function(d){
                    console.log(d);
                    t.GetList();
                });
            },
            GetOperateList: function () {
                const t = this;
                AjaxRequestText(t.url.OperateList(), {}, "GET", function(d){
                    //console.log(d);
                    var jsonObj = JSON.parse(d);
                    t.operate_list = jsonObj.body.data;
                    console.log(t.operate_list);
                });
            },
            TaskLastPG: function () {
                const t = this;
                t.task_pg = t.task_pg-1;
                t.GetList();
            },
            TaskNextPG: function () {
                const t = this;
                t.task_pg = t.task_pg+1;
                t.GetList();
            },
            OperateDelete: function (item) {
                const t = this;
                AjaxRequestText(t.url.OperateDelete(item.Date), {}, "GET", function(d){
                    console.log(d);
                    t.GetOperateList();
                });
            },
            RefreshOperate: function () {
                const t = this;
                t.GetOperateList();
            },

        },
        created:function(){
            console.log("created");
            this.GetList();
            this.GetOperateList();
            WSConnectNotice();
        },
        mounted:function(){

        },
    })

</script>

</body>
</html>